<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
        v-for="(item,index) in breadList"
        :key="index"
        :to="{ path: item.path }"
      >{{item.meta.title}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-select v-model="query.type" placeholder="用户类型" class="handle-select mr10">
          <el-option key="0" label="管理员" value="0"></el-option>
          <el-option key="1" label="普通用户" value="1"></el-option>
          <el-option key="2" label="VIP用户" value="2"></el-option>
        </el-select>
        <el-input v-model="query.username" placeholder="用户名" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </div>
      <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <el-table-column prop="userId" label="ID" width="55" align="center"></el-table-column>
        <el-table-column prop="username" label="用户名" width="80"></el-table-column>
        <el-table-column label="用户类型" width="100" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.type == '0'
                ? 'danger'
                : scope.row.type == '1'
                  ? 'success'
                  : 'warning'
              ">
              {{
                scope.row.type == '0'
                ? '管理员'
                : scope.row.type == '1'
                  ? '普通用户'
                  : 'VIP用户'
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column label="状态" align="center" width="80">
          <template #default="scope">
            <el-tag :type="scope.row.status == '1'
                ? 'success'
                : scope.row.status == '0'
                  ? 'danger'
                  : ''
              ">
              {{
                scope.row.status == '1'
                ? '正常'
                : scope.row.status == '0'
                  ? '停用'
                  : '未知'
              }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="createdAt" label="注册时间"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-popconfirm title="确定要删除此用户" confirm-button-text="确定" cancel-button-text="取消"
              @confirm="handleDelete(scope.$index, scope.row)">
              <template #reference>
                <el-button size="small" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination v-if="totalCount" v-model:currentPage="query.currentPage" v-model:page-size="query.pageSize"
          layout="prev, pager, next, jumper" :total="totalCount" @current-change="handleCurrentChange" />
      </div>
    </div>
    <el-dialog v-model="centerDialogVisible" title="用户编辑" width="40%">
      <div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" status-icon>
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username" />
          </el-form-item>
          <el-form-item label="用户密码" prop="password">
            <el-input v-model="ruleForm.password" type="password" />
          </el-form-item>
          <el-form-item label="用户地址" prop="address">
            <el-input v-model="ruleForm.address" />
          </el-form-item>
          <el-form-item label="电话号码" prop="phone">
            <el-input v-model="ruleForm.phone" />
          </el-form-item>
          <el-form-item label="用户类型" prop="type">
            <el-radio-group v-model="ruleForm.type">
              <el-radio :label="0">管理员</el-radio>
              <el-radio :label="1">普通用户</el-radio>
              <el-radio :label="2">vip用户</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="用户状态" prop="status">
            <el-radio-group v-model="ruleForm.status">
              <el-radio :label="0">停用</el-radio>
              <el-radio :label="1">正常</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitForm(ruleFormRef)">更新</el-button>
          <el-button @click="resetForm(ruleFormRef)">重置表单</el-button>
          <el-button @click="centerDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { useRouter, useRoute } from 'vue-router'
import { ref, reactive, watch } from "vue";
import request from "../../utils/request";
import { ElNotification } from "element-plus";
export default {
  setup() {
    let breadList = [] // 路由集合
    const route = useRoute()
    const getBreadcrumb=(url)=> {
      let matched = url.matched;
      //如果不是首页
      if ("Home"==matched[0].name) {
        matched[0].meta =  { title: "系统首页" } 
      }
      breadList = matched;
    }
    watch(route, (newValue, oldValue) => {
      // console.log(222222,newValue)
      getBreadcrumb(newValue)
    },{ deep: true, immediate: true });
    
    const resetForm = (formEl) => {
      if (!formEl) return;
      formEl.resetFields();
    };
    const submitForm = async (formEl) => {
      if (!formEl) return;
      await formEl.validate((valid, fields) => {
        if (valid) {
          // console.log("提交更新", fields);
          request
            .request({
              url: "/user/update",
              method: "post",
              data: {
                userId: ruleForm.userId,
                username: ruleForm.username,
                password: ruleForm.password,
                address: ruleForm.address,
                phone: ruleForm.phone,
                type: ruleForm.type,
                status: ruleForm.status,
              },
            })
            .then((res) => {
              if (res.data.code == 200) {
                ElNotification({
                  title: "更新成功",
                  message: "成功更新用户信息",
                  // 刷新页面
                  onClose: () => {
                    window.location.reload();
                  },

                
                });
              } else {
                ElNotification({
                  title: "更新失败",
                  message: "请联系管理员检查失败原因",
                });
              }
            })
            .catch((e) => {
              ElNotification({
                title: "更新失败",
                message: "请联系管理员检查失败原因",
              });
            });
        } else {
          ElNotification({
            title: "校验失败",
            message: "请重新填写信息",
          });
        }
      });
    };
    const ruleForm = reactive({
      userId: "",
      username: "",
      password: "",
      address: "",
      phone: "",
      type: 0,
      status: 1,
    });
    const rules = reactive({
      username: [
        {
          required: true,
          message: "请输入用户名",
          trigger: "blur",
        },
      ],
      password: [
        {
          required: true,
          message: "请输入密码",
          trigger: "blur",
        },
        {
          min: 1,
          max: 7,
          message: "长度大于1小于7",
          trigger: "blur",
        },
      ],
      phone: [
        {
          required: true,
          message: "请输入电话号码",
          trigger: "blur",
        },
      ],
      address: [
        {
          required: false,
          message: "请输入地址",
          trigger: "blur",
        },
      ],
      type: [
        {
          required: true,
          message: "请选择用户类型",
          trigger: "change",
        },
      ],
      status: [
        {
          required: true,
          message: "请选择用户状态",
          trigger: "change",
        },
      ],
    });
    const ruleFormRef = ref();
    const centerDialogVisible = ref(false);
    const query = reactive({
      address: "",
      username: "",
      currentPage: 1,
      pageSize: 5,
    });
    const tableData = ref([]);
    const totalCount = ref(0);
    // 获取表格数据
    const getData = () => {
      request
        .request({
          url: "/user/getAllUsersByPage",
          params: {
            type: query.type,
            username: query.username,
            currentPage: query.currentPage,
            pageSize: query.pageSize,
          },
          method: "get",
        })
        .then((res) => {
          //获取当前页的数据
          tableData.value = res.data.data.rows;
          //获取总记录数
          totalCount.value = res.data.data.count;
        })
        .catch((e) => {
          console.log(e);
        });
    };
    getData();
    // 查询操作
    const handleSearch = () => {
      getData();
    };
    // 分页导航
    const handleCurrentChange = (val) => {
      query.currentPage = val;
      getData();
      // console.log(val);
    };
    // 删除操作
    const handleDelete = (index, row) => {
      request
        .request({
          url: "/user/delete",
          method: "get",
          params: {
            userId: row.userId,
          },
        })
        .then((res) => {
          if (res.data.msg == "success") {
            getData();
            ElNotification({
              title: "删除成功",
              message: "成功删除用户信息",
            });
          } else {
            ElNotification({
              title: "删除失败",
              message: "请联系管理员检查失败原因",
            });
          }
        })
        .catch((e) => {
          ElNotification({
            title: "删除失败",
            message: "请联系管理员检查失败原因",
          });
        });
    };
    const handleEdit = (index, row) => {
      centerDialogVisible.value = true;
      ruleForm.userId = row.userId;
      ruleForm.username = row.username;
      ruleForm.password = row.password;
      ruleForm.address = row.address;
      ruleForm.phone = row.phone;
      ruleForm.type = row.type;
      ruleForm.status = row.status;
    };
    return {
      breadList,
      resetForm,
      ruleFormRef,
      submitForm,
      ruleForm,
      rules,
      centerDialogVisible,
      query,
      totalCount,
      tableData,
      getData,
      handleEdit,
      handleSearch,
      handleCurrentChange,
      handleDelete,
    };
  },
};
</script>
<style lang="scss" scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
